<template>
	<view class="all" style="padding-bottom: 200rpx;">
		<!-- <u-navbar title="提交" title-bold /> -->
		<view class="all_top">
			<image style="width:335rpx ;height: 190rpx;" :src="info.offline_detail.logo_image" />
			<view class="all_top_1">
				<view class="all_top_1_1">{{info.offline_detail.name}}</view>
				<view class="all_top_1_2">{{info.offline_detail.synopsis}}</view>
				<view class="all_top_1_3">
					<text>{{info.offline_detail.ticket_name}}</text>
					<text>{{info.cur_price}}</text>元
				</view>
			</view>
		</view>
		<view class="" style="height: 25rpx; background-color: #F8F8FA ;"></view>
		<view class="all_centent">
			<view class="all_centent_1">选择教具</view>
			<view v-for="(item,index) in info.teaching">
				<view class="all_centent_2">
					<image style="width: 100rpx;height: 100rpx;" :src="item.logo_image" />
					<view class="all_centent_2_1">
						<text>{{item.name}}</text>
						<text>￥{{item.discount_price}}</text>
					</view>
					<view style="position: absolute;right: 20rpx;" @click="xuanze(item)">
						<image v-if="item.check" style="width: 30rpx;height: 30rpx" :src="$src" />
						<image v-if="!item.check" style="width: 30rpx;height: 30rpx" :src="$src1" />
					</view>
				</view>
				<view class="xian" v-if="index!=info.teaching.length-1"></view>
			</view>

		</view>
		<view class="" style="height: 25rpx; background-color: #F8F8FA ;"></view>
		<view class="all_foot">
			<view class="all_centent_1">支付信息</view>
			<view class="all_footzf">
				<text>商品总价</text>
				<text>￥{{info.cur_price}}</text>
			</view>
			<view class="xian2"> </view>
			<view class="" v-for="item in zflist">
				<view class="all_footzf">
					<text>{{item.name}}</text>
					<text>+￥{{item.good_sku.specs_val? item.good_sku.discount_price:item.discount_price}}</text>
				</view>
				<view class="xian2"> </view>
			</view>
			<view class="all_footbottom">
				<text>需付款</text>
				<text>￥{{totalprice}}</text>
			</view>

		</view>
		<view class="xainxia all_foot">
			<view class="all_centent_1">重要通知</view>
			<text class="xainxia_1">线下课程时间为：{{info.offline_detail.activity_time}}</text>

			<mp-html :content="info.offline_detail.important" />
			<!-- <u-read-more :toggle="true" show-height="200" open-text='关闭' close-text='展开' color='#91969A'>
				<rich-text :nodes="info.offline_detail.activity_time" /> -->
			</u-read-more>
		</view>
		<view class="foot_5">
			<view class="foot_5_1">
				<image @click="index=true" style="width: 40rpx;height: 30rpx;margin-right: 10rpx;"
					:src="index?$src:$src1 " />
				<text>我已同意并同意《智伍汇课程活动安全通知》 《智伍汇购票退订协议》</text>
			</view>
		</view>
		<ljzf :money='totalprice' @onchange='play_' :type='text' :text='text?text:"确定选票"' />
	</view>
</template>

<script>
	import ljzf from '@/components/ljzf.vue'
	export default {
		components: {
			ljzf
		},
		data() {
			return {
				index: false,
				info: {},
				julist: {},
				order_id: '',
				title: '',
				money: '39.00',
				type: '',

				text: '',
				id: '',
				cur_id: "",

			}
		},
		onShow() {
			this.getinfo()
		},
		computed: {
			//总价
			totalprice() {
				// console.log(this.info.teaching)
				// let a = ''
				let a = this.info.cur_price * 1
				this.zflist.forEach(v => {
					if (v.good_sku.specs_val) {
						a = a + v.good_sku.discount_price * 1
					} else {
						a = a + v.discount_price * 1
					}
				})
				// this.info.teaching.forEach(v => {
				// 	if (v.check) {
				// 		a = a + v.discount_price * 1
				// 	}
				// })
				// 
				//限时折扣状态
				// if (this.info.limited.activity_type == '2') {
				// 	a = a * this.info.limited.money
				// }
				return a.toFixed(2)
			},
			//选择教具列表
			zflist() {
				let a = []
				this.info.teaching.forEach(v => {
					if (v.check) {
						a.push(v)
					}
				})
				return a
			}

		},
		onLoad(e) {
			this.order_id = e.order_id ? e.order_id : ''

		},
		methods: {
			xuanze(a) {
				if (a.check == true) {
					a.check = false
				} else if (a.check == false) {
					a.check = true
				}
			},
			getinfo() {
				this.$api('offline/orderShow', {
					order_id: this.order_id
				}).then(res => {
					res.data.teaching.forEach(v => {
						v.check = false
					})
					this.info = res.data
				})

			},
			play_() {
				if (this.index) {
					uni.navigateTo({
						url: `/pages/play/play?money=${this.money}&type=${this.type}&id=${this.id}`
					});
				} else {
					this.$toast('请同意底部用户须知', 0)
				}

			},
		}
	}
</script>

<style lang="scss">
	.foot_5 {
		position: fixed;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		background-color: white;
		width: 100%;
		bottom: 120rpx;

		.foot_5_2 {
			display: flex;
			align-items: center;
			padding: 20rpx 0 20rpx 0;
			justify-content: flex-end;
			margin-left: auto;

			text:nth-of-type(1) {
				font-size: 30rpx;
				font-family: HarmonyOS Sans;
				font-weight: 500;
				opacity: 1;
			}

			text:nth-of-type(2) {
				font-size: 36rpx;
				font-family: HarmonyOS Sans;
				font-weight: 600;
				color: #FF2424;
				opacity: 1;
			}
		}

		.foot_5_1 {
			justify-content: center;
			display: flex;
			padding-left: 100rpx;
			padding-right: 100rpx;
			width: 100%;

			text {
				text-align: center;
				font-size: 22rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #91969A;
				opacity: 1;
			}


		}
	}

	.xainxia {

		// margin-bottom: 150rpx;
		.xainxia_1 {
			display: inline-block;
			margin: 20rpx 0rpx 20rpx 0;
			font-size: 24rpx;
			font-family: HarmonyOS Sans;
			font-weight: 400;
			color: #131314;
			opacity: 1;
		}
	}



	.all_foot {
		min-height: 200rpx;
		position: relative;
		padding: 20rpx 20rpx 20rpx 20rpx;
		background-color: white;

		.all_footbottom {
			text-align: right;
			margin-top: 20rpx;

			text:nth-of-type(1) {
				font-size: 28rpx;
				font-family: HarmonyOS Sans;
				font-weight: 500;
				color: #131314;
				opacity: 1;
			}

			text:nth-of-type(2) {
				font-size: 36rpx;
				font-family: HarmonyOS Sans;
				font-weight: 600;
				color: #FF2424;
				opacity: 1;
			}
		}

		.all_footzf {
			display: flex;
			justify-content: space-between;
			vertical-align: bottom;
			padding: 20rpx 0 20rpx 0;

			text:nth-of-type(1) {
				width: 50%;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
				font-size: 28rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #131314;
				opacity: 1;
			}

			text:nth-of-type(2) {
				font-size: 30rpx;
				font-family: HarmonyOS Sans;
				font-weight: 500;
				color: #131314;
				opacity: 1;
			}
		}

		.all_centent_1 {
			font-size: 32rpx;
			font-family: Source Han Sans CN;
			font-weight: bold;
			color: #131314;
		}

	}

	.xian2 {
		height: 1rpx;
		background-color: rgba($color: #DDDDDD, $alpha: 0.5);
	}

	.xian {
		height: 1rpx;
		background-color: rgba($color: #DDDDDD, $alpha: 0.5);
		margin-top: 30rpx;
	}

	.all {
		min-height: 1624rpx;
	}

	.all_centent {
		.all_centent_2 {
			display: flex;
			margin-top: 30rpx;

			.all_centent_2_1 {
				position: relative;
				margin-left: 20rpx;
				width: 50%;

				text {
					display: block;
				}

				text:nth-of-type(1) {
					font-size: 28rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #131314;
					opacity: 1;
				}

				text:nth-of-type(2) {
					position: absolute;
					bottom: 0;
					font-size: 30rpx;
					font-family: HarmonyOS Sans;
					font-weight: 500;
					color: #FF2424;
					opacity: 1;
				}
			}
		}

		background-color: white;
		margin-top: 0rpx;
		padding: 20rpx;

		.all_centent_1 {
			font-size: 32rpx;
			font-family: Source Han Sans CN;
			font-weight: bold;
			color: #131314;
			opacity: 1;
		}
	}

	.all_top {
		display: flex;
		padding: 20rpx;
		background-color: white;

		.all_top_1_3 {
			font-size: 28rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #131314;
			opacity: 1;
			position: absolute;
			bottom: 0;

			text:nth-of-type(1) {
				font-size: 35rpx;
				color: #FF2424;
				font-weight: bold;
				margin-right: 10rpx;
			}

			text:nth-of-type(2) {
				font-size: 35rpx;
				color: #FF2424;
				font-weight: bold;
			}
		}

		.all_top_1 {
			position: relative;
			margin-left: 20rpx;
			width: 50%;

			.all_top_1_1 {
				font-size: 32rpx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				color: #131314;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
			}

			.all_top_1_2 {
				margin: 20rpx 0 0rpx 0;
				font-size: 28rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #91969A;
				opacity: 1;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
			}
		}
	}
</style>
